<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:composition template="/template.xhtml">
        <ui:define name="title">
            <h:outputText value="#{bundle.AppName}"></h:outputText>
        </ui:define>
        <ui:define name="body">

            <h:form id="messageForm">

                <p:panel header="Mensajeria" >
                    <p:accordionPanel id="chatAccor" >
                        <p:tab closable="true" title="Mensajes Individuales">


                            <p:panel header="#{bundle.MessageTitlePanelLeft}" style="width: 20%;float: left; " >
                                <h:panelGrid columns="1" style="width: 100%">
                                    <h:outputLabel value="userName"/>                        
                                    <p:autoComplete value="#{messagesBean.userSelected}"  completeMethod="#{messagesBean.completeUser}" var="user" itemLabel="#{user.userName}" itemValue="#{user}" converter="#{userConverter}" maxResults="10" minQueryLength="2" forceSelection="true" effect="puff" style="width: 100px;float: left" >  
                                        <p:column>  
                                            <p:graphicImage value="resources/images/profiles/default.png" width="40" height="40"/>  
                                        </p:column>
                                        <p:column >  
                                            #{user.userName}
                                        </p:column>  
                                        <p:ajax update="chatPanel" event="itemSelect"/>
                                    </p:autoComplete>
                                </h:panelGrid>
                            </p:panel>



                            <p:panel id="chatPanel" header="#{bundle.MessageTitleChatPanel} #{messagesBean.userSelected.userName}" style="width: 78%;float: left;">
                                <c:forEach items="#{messagesBean.getAllMessageUSer()}" var="message">
                                    <c:if test="#{messagesBean.validateMessage(message.userid.id)}" >
                                        <p:panel style="text-align: right">
                                            <h:outputText value="#{bundle.MessageIam} " style="font-weight: bold;"/>Ï
                                            <h:outputText value="#{message.body}" escape="false"/>
                                        </p:panel>
                                    </c:if>
                                    <c:if test="#{message.userid.id != loginBean.entity_User.id}">
                                        <p:panel  styleClass="ui-state-hover" style="text-align: left;">
                                            <h:outputText value="#{messagesBean.userSelected.userName} #{bundle.MessageTitleTalk} " style="font-weight: bold;" />
                                            <h:outputText value="#{message.body}" escape="false" />
                                        </p:panel> 
                                    </c:if>
                                </c:forEach>
                                <p:inputTextarea value="#{messagesBean.selected.body}" style="width: 88%;float: left" maxlength="100">
                                    <p:ajax update="chatPanel" event="blur" />
                                </p:inputTextarea>
                                <p:commandButton update="chatPanel" actionListener="#{messagesBean.send(event)}" value="#{bundle.MessageTitleButtonSend}" style="width:10%; height: 50px; float: right"/>
                            </p:panel>



                            <p:panel header="Mensajes Recibidos" style="width: 20%;float: left; " >
                                <h:panelGrid columns="1" style="width: 100%">

                                    <p:dataTable id="datalist" value="#{messagesBean.newUsersMessages}" var="item"
                                                 selectionMode="single" selection="#{messagesBean.usersAutoComplete}"
                                                 rowKey="#{item.userName}"
                                                 paginator="false" 
                                                 
                                                 >

<!--                                        <p:ajax event="rowSelect" update="chatPanel" />-->

                                        <p:column sortBy="#{item.userName}" filterBy="#{item.userName}">
                                            <f:facet name="header">
                                                <h:outputText value="#{bundle.ListUserMessagesTitle_userName}"/>
                                            </f:facet>
                                            <h:outputText value="#{item.userName}"/>
                                        </p:column>

                                    </p:dataTable>


                                </h:panelGrid>
                            </p:panel>


                        </p:tab>
                        <p:tab title="Mensajes Multi Difusion" closable="true" rendered="#{!loginBean.isStudent}">



                            <p:panel header="#{bundle.MessageTitlePanelLeftShortcuts}" style="width: 20%;float: left; " >
                                <h:panelGrid columns="1" style="width: 100%">
                                    <p:commandButton value="#{bundle.SelectAllUsers}" actionListener="#{messagesBean.changeModal2multi()}" update="chatAccor" />
                                    <p:commandButton value="#{bundle.SelectSuspendedUsers}" update="chatPanel" />
                                </h:panelGrid>
                            </p:panel>


                            <p:panel id="chatPanel2everyone" header="Mensaje Difusion!" style="width: 78%;float: left;">

                                <p:inputTextarea value="#{messagesBean.selected.body}" style="width: 88%;float: left" maxlength="100">
                                    <p:ajax update="chatPanel" event="blur" />
                                </p:inputTextarea>

                                <p:commandButton id="sendToAllUsers" update="chatPanel2everyone" actionListener="#{messagesBean.send2multi(event)}" value="#{bundle.MessageTitleButtonSend}" style="width:10%; height: 50px; float: left"/>


                            </p:panel>





                        </p:tab>
                    </p:accordionPanel>
                </p:panel>

            </h:form>




        </ui:define>

    </ui:composition>

</html>